<template>
    <div class="new-container">
        <!-- 新闻列表 -->
     <ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="item in newlist" :key='item.id'>
				<router-link :to="'/home/newcon/'+item.id">
					<img class="mui-media-object mui-pull-left" :src="item.img">
						<div class="mui-media-body">
							<h1>{{item.html}}</h1>
							<p class='mui-ellipsis'>
                              <span>{{item.time|timename}}</span>  
                             <span>点击率:{{item.click}}次</span>
                            </p>
						</div>
				</router-link>
			</li>
	</ul>
    <!-- <my-button type="danger" size="larger"></my-button> -->
    </div>
</template>
<script>
//按需导入Toast组件
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            newlist:[]
        }
    },
    created(){
         this.getnew()
    },
    methods:{
        getnew(){
            this.$http.get("http://localhost:3030/news").then(result=>{
                var news=JSON.parse(result.bodyText)
                if(news.status===0){
                 this.newlist=this.newlist.concat(news.message)
                 Toast("获取新闻")
                }else{
                Toast("没获取新闻")
                }
            })
        }
    }
}
</script>
<style scoped>
.new-container{
    width: 100%;
    padding: 0 5px; 
}
li{
    border-bottom: 1px solid #ccc;
}
h1{
 font-size:16px;   
}
.mui-ellipsis{
    color:seagreen;
    font-size: 12px;
    display:flex;
    justify-content: space-between;
}
</style>


